<template>
	<!-- 带搜索栏的顶部导航栏 -->
	<view class="header">
		<u-navbar :title="title" :bgColor="background" :autoBack="isBack" :leftIconSize="leftIconSize"
			:leftIconColor="leftIconColor" :titleStyle="titleStyle " :border="borderBottom" :leftText="leftText"
			:rightIcon="rightIcon" :rightText="rightText" :fixed="isFixed" :placeholder="placeholder" :titleWidth="titleWidth"
			:height="height" :safeAreaInsetTop="safeAreaInsetTop" @leftClick="onClickLeft" @rightClick="onClickRight"
			ref="uNavbar">
		</u-navbar>
		<!-- <u-navbar :title="titleSearch" :background="{ background: backgroundSearch }" :autoBack="isBack"
			:fixed="isFixedSearch" :leftIconColor="leftIconColorSearch" 
			@click.native.stop="handelSearch">
			<view class="u-nav-slot" slot="center">
				<u-input @focus="uInputFocus" @blur="uInputBlur" @input="uINputChange" :class="{'active':isButton==true}" class="u-input" style="padding: 10rpx 0;" :placeholder="inputPlaceholder"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" :suffixIcon="suffixIcon" size="large"
					suffixIconStyle="color: #909399"></u-input>
				<u-button v-if="isButton==true"  class="u-button" style="flex:1" type="error" text="搜索" size="mini"></u-button>
				<uni-search-bar :style="{width:searchWidth + 'rpx'}" @confirm="search" v-model="searchValue" @input="input"
					@cancel="cancel" @clear="clear">
				</uni-search-bar>
			</view>
		</u-navbar> -->
		<!-- <view class="" style="border: 3px solid red;position: relative;">
			<uni-search-bar  placeholder="请输入用户名称进行查询"  @input="inputFunc" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view> -->

	</view>
</template>

<script>
	var gloableData = getApp()
	export default {
		name: "header-search",
		props: {
			// 父组件页面参数
			parentObj:{
				type:Object,
			},
			searchValue: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "",
			},
			leftText: { //左边的提示文字
				type: String,
				default: ''
			},
			rightIcon: { //右边返回图标的名称，只能为uView自带的图标
				type: String,
				default: ''
			},
			rightText: { //右边的提示文字
				type: String,
				default: ''
			},
			titleSearch: {
				type: String,
				default: "",
			},
			safeAreaInsetTop: { //是否开启顶部安全区适配
				type: Boolean,
				default: true,
			},
			placeholder: { //固定在顶部时，是否生成一个等高元素，以防止塌陷
				type: Boolean,
				default: true,
			},
			inputPlaceholder: { //搜索输入框的站位
				type: String,
				default: "",
			},
			titleWidth: { //导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx
				type: Number,
			},
			height: { //导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px
				type: Number,
			},
			isBack: {
				type: Boolean,
				default: false,
			},
			isFixed: {
				type: Boolean,
				default: false,
			},
			isFixedSearch: {
				type: Boolean,
				default: false,
			},
			background: {
				type: String,
				default: "#ffffff",
			},
			backgroundSearch: {
				type: String,
				default: "#ffffff",
			},
			leftIconSize: { //左侧返回图标的大小
				type: Number,
				default: 23
			},
			leftIconColor: {
				type: String, //左侧返回图标的颜色
				default: '#303133',
			},
			leftIconColorSearch: { // 搜索框的左侧图标颜色
				type: String,
				default: '#FFF',
			},
			borderBottom: {
				type: Boolean,
				default: true,
			},
			icon: {
				type: String,
				default: "...",
			},
			inputColor: {
				type: String,
				default: '#f6f6f6'
			},
			titleStyle: { //标题的样式，对象或字符串形式 uview2.0.23
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				// 是否显示右侧删除按钮
				suffixIcon: "",
				// 用于赋值父组件的plaholder站位
				parentPlaceholder:"",
				// 是否显示搜索按钮
				isButton: false,
				globalData: {},
				// 输入框的宽度
				searchWidth: 0,
				searchText: ''
			};
		},
		computed: {},
		watch: {},
		created() {
			// this.globalData=getApp().globalData
			this.searchWidth = gloableData.windowWidth - 20
			// console.log('获取created生命周期数据', gloableData.windowWidth, gloableData.scaleFactor, this.searchWidth)
		},
		methods: {
			// 搜索框实时输入
			uINputChange(e){
				console.log('e',e)
				this.$emit('uINputChange', e)
			},
			// 搜索输入框获取焦点
			uInputFocus() {
				console.log('父组件', this.parentObj)
				// 获取焦点的时候显示删除图标
				this.suffixIcon = "close-circle-fill"
				this.isButton = !this.isButton
				this.parentObj.setInputPlaceholder(true)
			},
			// 搜索输入框离开焦点清楚删除图标
			uInputBlur() {
				// let parentPlaceholder=this.parentPlaceholder
				// 	this.parentObj.inputPlaceholder = parentPlaceholder
				this.suffixIcon = ""
				this.isButton = !this.isButton
				this.parentObj.setInputPlaceholder(false)
			},
			cancel(res) {
				this.$emit('cancel')
			},
			// 返回点击
			onClickLeft() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 顶部导航栏右侧图标按钮
			onClickRight() {
				this.$emit('onClickRight')
			},
			//点击跳转到详情
			handelSearch() {
				let vm = this;
				vm.$emit("handelHeaderSearch", vm.searchText);
			},
			//获取输入框的值
			search(val) {
				this.$emit('handleSearch', val.detail.value)
			},
			// 搜索框确认事件
			inputConfirm() {
				this.$emit('handleConfirm')
			},
			productshopListShow() {
				this.$emit('productshopListShow');
			},
			shopListChange() {
				this.$emit('shopListChange');
			}
		},
	};
</script>

<style scoped lang='scss'>
	.header {
		.u-nav-slot {
			border: 1px solid red;
			padding: 0 20rpx;
			display: flex;
			flex: 1;
       align-items: center;
			::v-deep.u-button--mini[data-v-2bf0e569]{
				 height: 64rpx !important;
			 }
			.u-input.active {
				margin-right: 10rpx;
			}

			.u-input {
				flex: 9;

			}

			.u-button {
				flex: 1
			}

		}
	}

	.slot-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 30upx;

		.main {
			height: 60upx;
			border-radius: 30upx;
		}

		.cancel {
			display: flex;
			align-items: center;

			text {
				width: 50upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 88upx;
				white-space: nowrap;
			}
		}

		.search {
			margin-left: 20upx;
			width: 134upx;
			height: 54upx;
			background: #FFFFFF;
			border: 1upx solid #EEEEEE;
			border-radius: 27upx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			image {
				&:first-child {
					width: 26upx;
					height: 6upx;
				}

				&:last-child {
					width: 20upx;
					height: 20upx;
				}
			}
		}
	}
</style>